<template lang="pug">
.table-nav-wrap
    ul.navbar-warp
      li(
        v-for="(item,index) in deviceNames"
        :key="'device'+index"
        :class="{'li-active':item.device==activeDevice}"
        @click="changeActiveDevice(item.device)") {{item.deviceName}}
      span.btn-export.iconfont.icon-export(
        title='导出'
        @click="fileEvent(deviceNames.find(item=>item.device===activeDevice).url+(areaId ? ('?areaId=' + areaId) :''))")
    component(
      v-if="showComponent"
      ref="table"
      :is="activeDeviceTable"
      :callbackData="callbackData")
</template>

<script>
/**
 * @name ZonalStatistic 设备统计表导航栏
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description
 */
import TableLUF from './TableLUF'
import TableDMA from './TableDMA'
import TableDPAF from './TableDPAF'
import TablePT from './TablePT'
export default {
  props: {
    areaId: Number | Boolean,
    timeRange: Array
  },
  components: {
    TableLUF,
    TableDMA,
    TableDPAF,
    TablePT
  },
  data () {
    return {
      deviceNames: [{
        device: 'DPAF',
        deviceName: '分区流量计',
        url: `/pn/dpa/stat/dpaf/export`
      }, {
        device: 'LUF',
        deviceName: '大用户电磁水表',
        url: `/pn/dpa/stat/luf/export`
      }, {
        device: 'PT',
        deviceName: '压力监测仪',
        url: `/pn/dpa/stat/pt/export`
      }, {
        device: 'DMA',
        deviceName: 'DMA专用水表',
        url: `/pn/dpa/stat/dma/export`
      }],
      activeDevice: '',
      activeDeviceTable: '',
      callbackData: {},
      showComponent: true
    }
  },
  watch: {
    areaId () {
      this.getCallbackData()
    },
    timeRange () {
      this.getCallbackData()
    }
  },
  methods: {
    changeActiveDevice (device) {
      // console.log('device:', device)
      this.activeDevice = device
      this.activeDeviceTable = 'Table' + device
    },
    getDeviceNum () {
      // 获取分区信息统计
      this.$get({
        url: `/pn/dpa/monitor/siteNum`,
        data: {
          // 'areaId': this.areaId,
          'startTime': this.timeRange[0],
          'endTime': this.timeRange[1]
        }
      }).then((data) => {
        // this.deviceNames = data.deviceName
        this.activeDevice = this.deviceNames[0].device
        this.activeDeviceTable = 'Table' + this.deviceNames[0].device
        // this.activeDeviceTable = 'TableKPI'
      })
    },
    getCallbackData () {
      this.callbackData = {
        areaId: this.areaId,
        timeRange: this.timeRange
      }
    },
    refreshTable () {
      if (this.$refs.table) this.$refs.table.getData()
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime()
        }
      }).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    }
  },
  mounted () {
    this.getDeviceNum()
    this.getCallbackData()
    if (this.$refs.table) this.$refs.table.getData()
  }
}
</script>

<style lang="sass" scoped>
.table-nav-wrap
  width: 100%
  display: flex
  overflow: hidden
  flex: 1
  flex-direction: column
  background-color: #fff
  padding: 10px
  .navbar-warp
    height: 30px
    width: 100%
    display: block
    position: relative
    .btn-export
      color: #a0a0a0
      font-size: 20px
      position: absolute
      right: 20px
      top: 5px
      cursor: pointer
    li
      width: 160px
      height: 30px
      text-align: center
      line-height: 30px
      font-size: 14px
      cursor: pointer
      border: 1px solid #dfdfdf
      display: inline-block
      transition: background-color 0.2s
    .li-active
      background-color: #29a1f7
      color: #fff
</style>
